<template>
  <div class="transQuery_main">
    <a-form>
      <a-row :gutter="16">
        <a-col :span="4">
          <a-form-item>
            <a-input placeholder="会员编号" v-model="query.data.merchantMemberNo" />
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1" style="padding:0;">
          <a-form-item>
            <a-input placeholder="客户名称" v-model="query.data.merchantName" />
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1" style="padding:0;">
          <a-form-item>
            <a-input placeholder="合作机构号" v-model="query.data.agentCode" />
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1" style="padding:0;">
          <a-form-item>
            <a-input placeholder="手机号" v-model="query.data.mobileNo" />
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1" style="padding:0;">
          <a-form-item>
            <a-input placeholder="法人/申请人姓名" v-model="query.data.identityName" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4">
          <a-form-item>
            <a-select
              placeholder="客户类型"
              :options="SettleStatusList"
              v-model="query.data.merchantType"
            ></a-select>
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1">
          <a-form-item>
            <a-select
              placeholder="当前状态"
              :options="StatusList"
              v-model="query.data.transOpen"
            ></a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="3">
          <a-form-item>
            <a-button class="button_sty" type="primary" :loading="loading" @click="handleSearch(1)">查询</a-button>
          </a-form-item>
        </a-col>
        <a-col :span="3">
          <a-form-item>
            <a-button class="button_sty" type="primary" @click="reset">重置</a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <a-table
      size="middle"
      :scroll="{ y: '38vh' }"
      :columns="columns"
      :dataSource="list"
      :pagination="false"
      :rowKey="record => record.merchantMemberNo"
    >
      <span slot="transTime" slot-scope="record">{{record.transTime | timeFilter}}</span>
      <span slot="mobileNo" slot-scope="record"><span v-if="record.agentType=='direct'&&sensitive=='0'">{{record.mobileNo}}</span><span v-else>{{record | phoneFilter}}</span></span>
      <span slot="identityName" slot-scope="record"><span v-if="record.agentType=='direct'&&sensitive=='0'">{{record.identityName}}</span><span v-else>{{record | namefilter}}</span></span>
      <span slot="transOpen" slot-scope="record">{{record.transOpen == true ? '开启' : '关闭'}}</span>
      <span slot="merchantType" slot-scope="record">
        <span v-if="record.merchantType == 'small'">小微商户</span>
        <span v-if="record.merchantType == 'org'">企业</span>
        <span v-if="record.merchantType == 'mer'">个体工商户</span>
      </span>
      <span slot="action" slot-scope="record">
        <span @click="goDetail(record.merchantMemberNo)" style="color:#1890ff;">详细</span>
      </span>
    </a-table>
    <a-pagination
      @change="onPageChange"
      :current="pagination.current"
      :total="pagination.total"
      :pageSize="query.pageSize"
      style="margin-top: 20px"
    />
  </div>
</template>

<script>

import AHideData from "../../common/HideData";
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";
import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import moment from "moment";
import api from "@/common/api";
const ATabPane = ATabs.TabPane;

const columns = [
  {
    title: "会员编号",
    dataIndex: "merchantMemberNo",
    width: "16%",
    align: "center"
  },
  {
    title: "合作机构号",
    dataIndex: "agentCode",
    width: "10%",
    align: "center"
  },
  {
    title: "手机号",
    // dataIndex: "mobileNo",
    scopedSlots: { customRender: "mobileNo" },
    width: "10%",
    align: "center"
  },
  {
    title: "法人/申请人姓名",
    // dataIndex: "identityName",
    scopedSlots: { customRender: "identityName" },
    width: "15%",
    align: "center"
  },
  {
    title: "客户名称",
    dataIndex: "merchantName",
    width: "10%",
    align: "center"
  },
  {
    title: "客户类型",
    scopedSlots: { customRender: "merchantType" },
    width: "10%",
    align: "center"
  },
  { title: "开通时间", dataIndex: "openTime", width: "15%", align: "center" },
  {
    title: "当前状态",
    scopedSlots: { customRender: "transOpen" },
    width: "8%",
    align: "center"
  },
  {
    title: "操作",
    scopedSlots: { customRender: "action" },
    width: "8%",
    align: "center"
  }
];

export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    ATabPane,
    ATabs,
    AForm,
    AHideData
  },

  data() {
    return {
      today: new Date(),
      columns,
      isClear: false,
      momentDate: moment(new Date()),
      excelurl: "",
      SettleStatusList: [
        { label: "全部", value: "all" },
        { label: "企业", value: "org" },
        { label: "个体工商户", value: "mer" },
        { label: "小微商户", value: "small" }
      ],
      StatusList: [
        { label: "全部", value: null },
        { label: "开启", value: true },
        { label: "关闭", value: false }
      ],
      transTypeList: [],
      query: {
        data: {
          merchantMemberNo: null,
          identityName: null,
          mobileNo: null,
          merchantName: null,
          agentCode: null,
          merchantType: "all",
          transOpen: null,
        },
        page: 1,
        pageSize: 10
      },
      pagination: { current: null, total: null },
      visible: false,
      form: this.$form.createForm(this),
      error: "",
      loginpwd: "",
      loginpwd2: "",
      login: false,
      list: [],
      count: null,
      payedCount: null,
      totalAmount: null,
      loading: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14, offset: 1 },
          md: { span: 14, offset: 1 }
        }
      },
      sensitive:localStorage.getItem("sensitive")
    };
  },
  watch: {},
  filters: {
    timeFilter: function(value) {
      if (value) {
        let year = value.substring(0, 2);
        let mouth = value.substring(2, 4);
        let day = value.substring(4, 6);
        return year + ":" + mouth + ":" + day;
      }
    },
    phoneFilter(value) {
      if (value.mobileNo) {
        var reg = /^(\d{3})\d{4}(\d{4})$/;
        return value.mobileNo.replace(reg, "$1****$2");
      }
    },
    namefilter(value) {
      if (value.identityName) {
        var reg = /^./;
        return value.identityName.replace(reg, "*");
      }
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.handleSearch(1);
    // this.transTypeQuery();
    // this.statusQuery();
    // this.SettleStatusQuery();
    // var date = new Date();
    // var month = date.getMonth();
    // var dates = date.getDate();
    // if (date.getMonth() < 9) {
    //   month = "0" + parseInt(month + 1);
    // } else {
    //   month = month + 1;
    // }
    // if (date.getDate() <= 9) {
    //   dates = "0" + date.getDate();
    // }
    // this.query.data.transDate = date.getFullYear() + "" + month + "" + dates;
  },
  methods: {
    moment,
    onPageChange: function(page, pageSize) {
      console.info(page, pageSize);
      this.query.page = page;
      this.query.pageSize = pageSize;
      this.handleSearch(page);
    },
    onChange(dates, dateStrings) {
      // this.query.data.transDate = null;
      this.query.data.transDate = dateStrings;
      console.info(this.query.data.transDate);
    },
    reset() {
      this.query.data = {
        merchantMemberNo: null,
        identityName: null,
        mobileNo: null,
        merchantName: null,
        agentCode: null,
        merchantType: "all",
        transOpen: null,
      };

      //   var date = new Date();
      //   this.momentDate = moment(date);
      //   var month = date.getMonth();
      //   var dates = date.getDate();
      //   if (date.getMonth() < 9) {
      //     month = "0" + parseInt(month + 1);
      //   } else {
      //     month = month + 1;
      //   }
      //   if (date.getDate() <= 9) {
      //     dates = "0" + date.getDate();
      //   }
      //   this.query.data.transDate = date.getFullYear() + "" + month + "" + dates;
    }, //重置
    conexport() {
      console.info(this.query.data);
      this.$axios
        .post("/agent/transaction/fetchExportQuery", this.query.data)
        .then(res => {
          let token = localStorage.getItem("token");
          let downloadUrl =
            "/agent/transaction/excelDownloadTrans?Authorization=" + token;
          location.href = downloadUrl;
        });
    },
    protocolstatus() {
      //此方法是用来填充状态的
      this.transTypeList = [];
      this.$axios.get("/agent/transaction/protocolList").then(res => {
        console.info(res);
        this.transTypeList.push({ label: "全部", value: "" });
        for (var i = 0; i < res.data.list.length; i++) {
          this.transTypeList.push({
            label: res.data.list[i].transName,
            value: res.data.list[i].transCode
          });
        }
      });
    },
    // 交易类型查询
    transTypeQuery() {
      let data = {
        groupCode: "offilne_trans_type"
      };
      api.statusQuery(
        data,
        res => {
          console.log(res);
          if (res.code == "OK") {
            let statusList = res.list;
            this.transTypeList = [{ value: "all", label: "全部" }];
            statusList.forEach((item, index) => {
              let itemList = {
                value: item.value,
                label: item.label
              };
              this.transTypeList.push(itemList);
            });
          } else {
          }
        },
        err => {}
      );
    },
    //交易状态查询
    statusQuery() {
      let data = {
        groupCode: "offline_trans_status"
      };
      api.statusQuery(
        data,
        res => {
          console.log(res);
          if (res.code == "OK") {
            let statusList = res.list;
            this.statusList = [{ value: "all", label: "全部" }];
            statusList.forEach((item, index) => {
              let itemList = {
                value: item.value,
                label: item.label
              };
              this.statusList.push(itemList);
            });
          } else {
          }
        },
        err => {}
      );
    },
    //结算状态查询
    SettleStatusQuery() {
      let data = {
        groupCode: "offline_settle_status"
      };
      api.statusQuery(
        data,
        res => {
          console.log(res);
          if (res.code == "OK") {
            let statusList = res.list;
            this.SettleStatusList = [{ value: "all", label: "全部" }];
            statusList.forEach((item, index) => {
              let itemList = {
                value: item.paramKey,
                label: item.paramValue
              };
              this.SettleStatusList.push(itemList);
            });
          } else {
          }
        },
        err => {}
      );
    },
    // 商户信息查询
    handleSearch(page) {
      this.loading = true;
      console.info(this.query);
      this.query.page = page;
      this.$axios
        .post("/agent/merchant/information/query", this.query)
        .then(res => {
          console.info(res);
          if (res.data.code == "OK") {
            this.loading = false;
            // res.data.list.forEach(i =>{
            //   if(i.status == true){
            //     this.list.push(i)
            //   }
            // })
            this.list = res.data.list;
            this.pagination.current = res.data.current;
            this.pagination.total = res.data.total;
            // this.count = res.total; //总笔数
            // this.payedCount = res.payedCount; //成功笔数
            // this.totalAmount = res.totalAmount.toFixed(2); //总金额
          } else {
            this.loading = false;
            // this.$message.info(res.message)
            this.list = [];
            this.pagination.current = 1;
            this.pagination.total = 1;
            return false;
          }
        })
        .catch(res => {
          if (res) {
            // this.$message.error("连接服务器超时")
            this.loading = false;
          }
        });
    },
    goDetail(id) {
      console.log(id);
      // this.$router.push(`/org/transmanage/${id}/transquerydetail`)
      this.$router.push(`/OrgRegister/orgInfoQueryDetail/${id}`);
    }
  }
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}

span {
  cursor: pointer;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}

.ant-tabs-nav {
  float: right;
}

.amountColor {
  color: #29a576;
  font-weight: 400;
}

.amountSize {
  font-size: 20px;
  padding: 0 5px;
}

.expand {
  display: flex;
  align-items: center;
  justify-content: center;
}

.transQuery_main {
  padding: 70px;
  background: #fff;
}

.button_sty {
  width: 100%;
}

/deep/ .ant-message-notice  {
  font-size: 36px;
}
/deep/ .ant-message-error  {
  font-size: 36px;
}
/deep/ .ant-message-notice span {
  font-size: 36px;
}
/deep/ .ant-message-error span {
  font-size: 36px;
}
/deep/ .ant-message-notice-content {
  font-size: 18px;
}
/deep/ .ant-message-notice-content span {
  font-size:36px;
}
/deep/ .ant-message-custom-content span {
  font-size:36px;
}
</style>